<script>
// import {
//   checkIdCardAndPhone,
//   getSysPerson,
//   mobileLogin,
//   sendVertifyCodeByPhone,
//   updateBindPhone
// } from "@/services/user/UserInfoService";
  // import {sendVertifyCode} from "@/services/ServerService";
import {contraction, notificationFun} from "@/utils/PrjUtils";
import { sendCode } from "../../services/ServerService";
import { aesFunContent, phoneReg } from "../../utils/PrjUtils";
import { checkIdCardAndPhone, newMobileLogin, updateBindPhone, uploadImg } from "../../services/UserInfoService";

  export default {

    onLoad(query) {
      this.queryData = JSON.parse(query.obj)
    },
    onShow() {
      let loginData=uni.getStorageSync('loginData')
      this.phone=loginData.phone
    },
    data() {
      return {
        time: false,
        userData:{},
        queryData: {},
        showPassword:true,
        showPasswordTo:true,
        phone:'',
        passwd:'',
        passwdTo:'',
        vertifyCode:'',
        portrait:'',
        nationalEmblem:'',
        isLoading:false,
      }
    },
    methods: {
      onSendVertifyCodeByPhone() {
        if(this.passwd==this.phone){
            return  notificationFun("新旧手机号不能一致")
        }
        if(phoneReg.test(this.passwd)) {
          sendCode(this.passwd, 3).then(res => {
            this.time = true;
            notificationFun('发送成功请注意查收！');
          })
        } else {
          return notificationFun('请输入正确的手机号！');
        }
      },

      onOk() {
        if(!this.passwd) {
          return notificationFun('请输入密码')
        }
        if(this.passwdTo !== this.passwd) {
          return notificationFun('两次密码不一致')
        }
        let obj={
          phone:aesFunContent(this.phone),
          password:aesFunContent(this.passwd)
        }
        newMobileLogin(obj).then(res => {
          uni.navigateBack({
            delta: 2,//返回层数，2则上上页
          })
          uni.removeStorageSync('loginData')
          uni.removeStorageSync('appKey')
          notificationFun('修改成功')
        });
      },

      changeNumber() {
        if(!this.passwd) {
          return notificationFun('请输入新手机号')
        }
        
        if(!this.vertifyCode) {
          return notificationFun('请输入验证码')
        }
        if(this.passwd==this.phone){
          return notificationFun('新旧手机号不能一致')
        }
        updateBindPhone(this.phone,this.passwd, this.vertifyCode).then(res => {
          uni.navigateBack({
            delta: 2,//返回层数，2则上上页
          })
          uni.removeStorageSync('loginData')
          uni.removeStorageSync('appKey')
          notificationFun('修改成功')
        });
      },
      onSelectImage(key) {
        uni.chooseMedia({
          count: 1, // 默认9
          mediaType: ['image'],
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: (res) => {
            const url = res.tempFiles[0].tempFilePath
            // 获取文件管理器
            const fileSystemManager = uni.getFileSystemManager()
            // 读取图片信息
            fileSystemManager.getFileInfo({
              filePath: url,
              success: res => {
                // 大于4M启用压缩
                if ((res.size / 1024 / 1024) > 4) {
                  wx.getImageInfo({
                    src: url,
                    success: (cRes) => {
                      console.log(cRes, 'res')
                      let imgInfo = {
                        type: cRes.type,
                        height: cRes.height,
                        width: cRes.width,
                        path: cRes.path
                      }
                      contraction(imgInfo, 'myCanvas', this).then(newUrl => {
                        // if(key === '1') {
                        //   uploadImg('data:image/jpeg;base64,' + fileSystemManager.readFileSync(newUrl.tempFilePath, 'base64')).then(res=>{
                        //     this.portrait = res
                        //   })
                        // } else {
                        //   uploadImg('data:image/jpeg;base64,' + fileSystemManager.readFileSync(newUrl.tempFilePath, 'base64')).then(res=>{
                        //     this.nationalEmblem
                        //   })
                        // }
                        uploadImg('data:image/jpeg;base64,' + fileSystemManager.readFileSync(newUrl.tempFilePath, 'base64')).then(res=>{
                          if(key === '1') {
                            this.portrait = res||""
                          } else {
                            this.nationalEmblem = res||""
                          }
                        })
                      })
                    },
                    fail(err) {

                    }
                  })
                } else {
                  uploadImg('data:image/jpeg;base64,' + fileSystemManager.readFileSync(url, 'base64')).then(res=>{
                        if(key === '1') {
                          this.portrait = res||""
                        } else {
                          this.nationalEmblem = res||""
                        }
                  })
                  // if(key === '1') {
                  //   this.portrait = 'data:image/jpeg;base64,' + fileSystemManager.readFileSync(url, 'base64');
                  // } else {
                  //   this.nationalEmblem = 'data:image/jpeg;base64,' + fileSystemManager.readFileSync(url, 'base64');
                  // }
                }
              },
            })
          }
        })
      },
      onCheckIdCardAndPhone() {
        if (this.isLoading) {
          return;
        }
        if (!this.portrait) {
          return notificationFun('请上传身份证人像面照片');
        }
        if (!this.nationalEmblem) {
          return notificationFun('请上传身份证国徽面照片');
        }
        this.isLoading=true;
        checkIdCardAndPhone(JSON.stringify({front:this.portrait,back:this.nationalEmblem})).then(res => {
          uni.navigateBack({
            delta: 2,//返回层数，2则上上页
          })
          this.isLoading = false
          uni.removeStorageSync('loginData')
          uni.removeStorageSync('appKey')
          notificationFun('修改成功')
        }).catch(err => {
          this.isLoading = false
        })
      },
      //取消
      onMyCancel(){
        uni.navigateBack()
      }
    },
  }
</script>

<template>
  <view>
    <view style="height: 160rpx">
      <BasicNavbar
          :title="queryData.text"
          :autoBack="true"
      >
      </BasicNavbar>
    </view>
    <scroll-view scroll-y="true" style="width: 100%; height: calc(100vh - 160rpx);padding: 0 30rpx;box-sizing: border-box;">
      <view v-if="queryData.text === '修改密码'" style="padding: 0 30rpx">
        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>登录账号：</view>
        </view>

        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="phone" disabled="true" style="height: 24px; flex:1;"/>
        </view>

        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>新密码：</view>
        </view>

        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="passwd" style="height: 24px; flex:1;" placeholder="请输入密码" :password="showPassword" />
          <view v-show="passwd.length">
            <u-icon @click="showPassword= !showPassword" name="eye" :color="showPassword ? '#8E8E8E' : '#344B7D'" size="40rpx"></u-icon>
          </view>
          <view @click="passwd=''" v-show="passwd.length" style="margin-left: 20rpx">
            <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
          </view>
        </view>

        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>重复密码：</view>
        </view>
        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="passwdTo" style="height: 24px; flex:1;" placeholder="请输入确认密码" :password="showPasswordTo" />
          <view v-show="passwdTo.length">
            <u-icon @click="showPasswordTo= !showPasswordTo" name="eye" :color="showPasswordTo ? '#8E8E8E' : '#344B7D'" size="40rpx"></u-icon>
          </view>
          <view @click="passwdTo=''" v-show="passwdTo.length" style="margin-left: 20rpx">
            <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
          </view>
        </view>
        <!-- <button type="default" hover-class="hoverClass" style="color:#fff; width: 400rpx; height: 80rpx;" class="gradient-button"  @click="() => {
          onOk(formValue);
        }">确定</button> -->
        <view class="flex between item-center bottomWrap">
            <text @click="onMyCancel">取消</text>
            <view class="OkBtn" @click="() => {onOk(formValue);}">完成</view>
        </view>

      </view>
      <view v-else-if="queryData.text === '换绑手机号'" style="padding: 0 30rpx">

        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>旧手机：</view>
        </view>

        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="phone" disabled="true" style="height: 24px; flex:1;"/>
        </view>

        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>新手机：</view>
        </view>

        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="passwd" style="height: 24px; flex:1;" placeholder="请输入新手机号码" />
          <view @click="passwd=''" v-show="passwd.length" style="margin-left: 20rpx">
            <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
          </view>
          <view style="margin-left: 20rpx;font-size: 28rpx">
            <text v-if="!time" type="info" size="mini" @click="() => {
              onSendVertifyCodeByPhone();
            }">获取验证码</text>
            <view v-else>
              <u-count-down :time="60 * 1000" format="ss" autoStart @finish="time = false"></u-count-down>
            </view>
          </view>
        </view>

        <view style="display: flex; margin-top: 40rpx;">
          <view style="color: #D6361D">*</view>
          <view>验证码：</view>
        </view>
        <view style="padding: 24rpx 30rpx; border: 1rpx solid #F0F0F0; border-radius: 12rpx; margin-top: 20rpx; display: flex; flex-direction: row; align-items: center">
          <input v-model="vertifyCode" style="height: 24px; flex:1;" placeholder="请输入验证码" />
          <view @click="vertifyCode=''" v-show="vertifyCode.length" style="margin-left: 20rpx">
            <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
          </view>
        </view>
        <view class="flex between item-center bottomWrap">
            <text @click="onMyCancel">取消</text>
            <view class="OkBtn" @click="() => {changeNumber(formValue);}">完成</view>
        </view>

        <!-- <button type="default" hover-class="hoverClass" style="color:#fff; width: 400rpx; height: 80rpx;" class="gradient-button"  @click="() => {
          changeNumber(formValue);
        }">确定</button> -->
      </view>
      <view v-else style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;box-sizing: content-box">
        <view style="width: 100%; height: 400rpx;  border: 2rpx solid #EEEEEE; margin-top: 40rpx; border-radius: 40rpx; display: flex; justify-content: center; align-items: center" @click="() => {onSelectImage('1')}">

          <image
              v-if="portrait"
              style="width: 100%; height: 400rpx; border-radius: 40rpx;"
              :src="portrait"
          />
          <view v-else class="center flex-column">
              <image src="../../static/images/user/sfzm.svg" style="width: 270rpx ;height: 172rpx;"/>
              <image src="../../static/images/user/uploadIcon.svg"  style="width: 48rpx ; height: 48rpx;margin: 20rpx 0;"/>
              <view style="color:#999;font-size: 24rpx;">请上传身份证人像面照片</view>
          </view>
        </view>

        <view style="width: 100%; height: 400rpx;  border: 2rpx solid #EEEEEE; margin-top: 40rpx; border-radius: 40rpx; display: flex; justify-content: center; align-items: center" @click="() => {onSelectImage('2')}">
          <image
              v-if="nationalEmblem"
              style="width: 100%; height: 400rpx; border-radius: 40rpx;"
              :src="nationalEmblem"
          />
          <view v-else class="center flex-column">
              <image src="../../static/images/user/sffm.svg" style="width: 270rpx;height:172rpx;"/>
              <image src="../../static/images/user/uploadIcon.svg" style="width: 48rpx ; height: 48rpx;margin: 24rpx 0 ;" />
              <view style="color:#999;font-size: 24rpx;">请上传身份证国徽面照片</view>
          </view>
        </view>
        <view class="flex between item-center bottomWrap">
            <text @click="onMyCancel">取消</text>
            <view class="OkBtn" @click="onCheckIdCardAndPhone">提交</view>
        </view>
        <!-- <button type="default" hover-class="hoverClass" style="color:#fff; width: 400rpx; height: 80rpx; margin-top: 40rpx" class="gradient-button"  @click="() => {
          onCheckIdCardAndPhone();
        }">确定换绑</button> -->
      </view>
    </scroll-view>
  </view>
</template>

<style>
page{
  background: #fff !important;
}
.gradient-button {
  margin-top: 40rpx;
  background: -webkit-linear-gradient(#334977 , #4D83E8 );
  color: #fff;
}
.OkBtn {
    color: #fff;
    border: 1px solid #4DC38585;
    background: linear-gradient(90deg, #37B874 0%, #B7F5D4 100%);
    width: 120rpx;
    height: 60rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottomWrap{
  width: 100%;
  margin-top: 96rpx;
}
</style>